<template>
  <el-button v-wave :loading="downloadLoading" type="primary" :icon="Download" @click="handleDownload">
    导出Excel
  </el-button>
  <el-table border :data="tableData" style="width: 100%">
    <!-- <columns :cols="tableHead">
    <template v-slot="{row}">
    {{row}}
    </template>
    </columns> -->

    <el-table-column type="index" label="序号" width="150" />
    <template v-for="item in tableHead" :key="item.id">
      <my-colums v-if="item.children && item.children.length" :columns="item">
      </my-colums>
      <el-table-column :key="item.id" v-else :label="item.label" :prop="item.prop"> </el-table-column>
    </template>

    <!-- <el-table-column v-for="(item, index) in tableHead" :key="index" :prop="item.prop" :label="item.label">
      <template #default="scope">
        {{ scope.row[item.prop] }}
        <el-table-column v-for="(item, index) in item.children" :key="index" :prop="item.prop" :label="item.label">
          <template #default="scope">
            {{ scope.row[item.prop] }}
            <el-table-column v-for="(item, index) in item.children" :key="index" :prop="item.prop" :label="item.label">
              <template #default="scope">
                {{ scope.row[item.prop] }}
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </template>
    </el-table-column> -->
  </el-table>
</template>

<script setup>
import { ref } from 'vue'
import MyColums from './MyColums'
import columns from './columns'
import { Download } from '@element-plus/icons-vue'
const downloadLoading = ref(false)
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
])
const tableHead = ref([
  {
    label: 'Date',
    prop: 'date',
  },
  {
    label: 'Delivery Info',
    // prop: 'deliveryinfo',//可有可无
    children: [
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address Info',
        // prop: 'addressinfo',
        children: [
          {
            label: 'State',
            prop: 'state',
            children: [
              {
                label: 'City1',
                prop: 'city',
              },
              {
                label: 'City3',
                prop: 'city',
              },
            ],
          },
          {
            label: 'City',
            prop: 'city',
          },
          {
            label: 'Address',
            prop: 'address',
          },
          {
            label: 'Zip',
            prop: 'zip',
          },
        ],
      },
    ],
  },
])
const handleDownload = () => {
  downloadLoading.value = true
  import('/@/vendor/Export2Excel').then(excel => {
    excel.export_json_to_dynamicexcel({
      dynamicMulti: tableHead.value,
      dynamicData: tableData.value,
      filename: 'table-list',
    })
    downloadLoading.value = false
  })
}
defineOptions({
  name: 'Multistage',
})
</script>
<style scoped>
</style>
